<template>
    <div class="RecommendDiv">
       <div>
           <p class="Recommendp">{{title}}<span>></span></p>
           <ul class="RecommendUl">
               <div v-for="item in recommData">
                   <div class="Datali" style="float:left">
                       <div class="Recommendimg">
                           <a href="#">
                             <img v-bind:src="item.img" alt="" class="Recommendheight">
                           </a>
                       </div>
                       <p class="Recommendtitle">{{item.name}}</p>
                       <div>
                           <span class="Recommendpir">{{item.price}}/斤</span>
                          <div  v-if="item.specifications.length > 0"><div class="Recommendshop"><a src="#">购买</a></div></div>
                          <div v-else-if="item.specifications.length = 0"><div class="Recommendsho"><a src="#">暂时无货</a></div></div>
                       </div>
                   </div>
               </div>
           </ul>
       </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            seen:true,
            title:'推荐商品',
            option:[{
                link:require('../../assets/1.png'),
                title:'智利 熟冻 帝王蟹 13公斤不定重/箱 800-2400g',
                pir:'21',
                purchase:1
            },{
                link:require('../../assets/1.png'),
                title:'智利 熟冻 帝王蟹 13公斤不定重/箱 800-2400g',
                pir:'39',
                purchase:1
            },{
                link:require('../../assets/1.png'),
                title:'智利 熟冻 帝王蟹 13公斤不定重/箱 800-2400g',
                pir:'39',
                purchase:1
            },{
                link:require('../../assets/1.png'),
                title:'智利 熟冻 帝王蟹 13公斤不定重/箱 800-2400g',
                pir:'39',
                purchase:1
            },{
                link:require('../../assets/1.png'),
                title:'智利 熟冻 帝王蟹 13公斤不定重/箱 800-2400g',
                pir:'39',
                purchase:9
            },],
          recommData: []
        }
    },
    mounted:function(){
        this.purchase();
          this.queryShow();
    },
    methods:{
        purchase:function(){
           var that=this;
           
           for(var key in that.option){
            //    if(that)
            // alert(that.option[key].purchase)
             that.seen=false
             if(that.option[key].purchase===9){}
           }

        },
      queryShow(){
          this.$ajax.get("http://60.205.186.52/laravel53/public/api/recommend").then(result=>{
            this.recommData = result.data;
          })
      }
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.RecommendDiv{
    width:1200px;
    height: 335px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
.Recommendp{
    width: 100%;
    height: 23px;
    border-bottom: 1px solid #ccc;
    line-height: 23px;
    text-indent: 1em;
    font-size: 15px;
    font-weight:800;
}
.Recommendp span{
    float: right;
    padding-left: 3px;
    color: #ccc;
}
.Datali{
    width: 19.917%;
    height: 312px;
    border-right: 1px solid #ccc;
}
.Recommendtitle{
    font-size: 13px;
    padding-left: 5px;
}
.Recommendpir{
    float: left;
    font-style: 13px;
    padding-left: 5px;
    padding-top: 5px;
    color:red;
}
.Recommendshop{
    width: 38px;
    height: 22px;
    background: red;
    float: right;
    margin-right: 3px;
    border-radius:17%;
    text-align: center;
}
.Recommendshop :hover{
    background:rgba(138, 11, 11,0.7);
    border-radius:17%;
}
.Recommendshop a{
    color: white;
    font-size: 10px;
}
.Recommendsho{
    width: 50px;
    height: 22px;
    float: right;
    background: #ccc;
    font-size: 10px;
    text-align: center;
    line-height: 22px;
}
.Recommendimg{
    /* padding-top:10px; */
    padding-left: 3px;
    height: 231px;
    position: relative;
}

.Recommendheight{
    position: absolute;
    top: 10px;
  width: 231px;
  height: 220px;
}
.Recommendheight:hover{
    transition: all 0.5s linear;
    top:3px;
}
</style>
